Flexbox 

    Fundamentos do Flexbox 

    Display Flex 

    O Flexbox está dividido em dois grupos: Flex Container e Flex Item.

    display: flex;

    Flex Container 

    Flex Direction 

    • Define a direção dos flex itens.
    flex-direction: row;

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

    Flex Wrap 

    • Define se os itens devem quebrar ou não a linha
    • Por padrão eles não quebram (nowrap)
    flex-wrap: nowrap;

flex-wrap: wrap;

flex-wrap: wrap-reverse;

    Flex Flow 

    • Atalho para as propriedades flex-direction e flex-wrap
    flex-flow: row nowrap;

flex-flow: row wrap;

flex-flow: column nowrap;

    Justify Content 

    • Alinha os itens flex no container de acordo com a direção.
    justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

    Align Items 

    • Alinha os flex itens de acordo com o eixo do container
    • O alinhamento é diferente para quando os itens estão em colunas ou linhas
    align-items: stretch;

align-items: flex-start;

align-items: flex-end;

align-items: center;

align-items: baseline;

    Align Content 

    • Alinha as linhas do container em relação ao eixo vertical
    align-content: stretch;

align-content: flex-start;

align-content: flex-end;

align-content: center;

align-content: space-between;

align-content: space-around;

    Flex Item 

    Flex Grow 

    • Habilidade de um flex item crescer
    • Por padrão o valor é zero
    flex-grow: número;

flex-grow: 0;

    Flex Basis 

    • tamanho inicial do flex item antes da distribuição do espaço restante
    flex-basis: auto;

flex-basis: unidade;

flex-basis: 0;

    Flex Shrink 

    • Define a capacidade de redução de tamanho do item.
    flex-shrink: 1;

flex-shrink: 0;

flex-shrink: número;

    Flex 

    • Atalho para as propriedades flex-grow, flex-shrink e flex-basis
    • Para melhor consistência entre os browsers, é recomendado utilizar a propriedade flex ao invés de cada propriedade separada
    flex: 1;

flex: 0 1 auto;

flex: 2;

flex: 3 2 300px;

    Order 

    • Modifica a ordem dos flex itens
    • Sempre do menor para o maior
    order: número;

order: 0;

    Align Self 

    • Serve para definirmos o alinhamento específico de um único flex item dentro do nosso container
    align-self: auto;

align-self: flex-start;

align-self: flex-end;

align-self: center;

align-self: baseline;

align-self: stretch;